<template>
	<view class="comment-container">
		<view v-for="first in data" key="index">
			<view class="comment">
				<view class="comment-first-avatar">
					<image class="avatar" :src="first.avatar" mode="aspectFill"></image>
				</view>
				<!-- 一级评论 -->
					<view class="comment-first">
						<view class="comment-right">
							<view>{{first.user_name}}</view>
							<view class="comment-content">
								{{first.content}}
								<!-- <span
								  class="shrink"
								  v-if="isShrink"
								  @tap.stop="expandContentFun(first.content)"
								  >...展开</span> -->
							</view>
							<!-- 评论时间，点赞，回复 -->
							<view class="comment-bottom">
								<view>
									<text>{{first.create_time}}</text>
									<text class="dot">·</text>
									<text>{{first.publish_address}}</text>
									<text class="replies" @click="handleReplies">回复</text>
								</view>
								<Likes
									:likes="first.likes_count" 
									:likesStatus="first.likesStatus"
									@update:likesStatus="handleLikes"/>
							</view>
					</view>
					<!-- 二级评论 -->
					<view class="comment-second">
						<view v-for="second in first.repliesList" key="index">
							<view class="comment-right">
								<view class="comment-people">
									<image class="comment-second-avatar" :src="second.avatar" mode="aspectFill"></image>
									{{second.user_name}}
									<!-- <template v-if=""> -->
										<!-- <view class="comment-triangle"></view>
										{{second.user_name}} -->
									<!-- </template> -->
								</view>
								<view class="comment-content">{{second.content}}</view>
								<view class="comment-bottom">
									<view>
										<text>{{second.create_time}}</text>
										<text class="dot">·</text>
										<text>{{second.publish_address}}</text>
										<text class="replies" @click="handleReplies">回复</text>
									</view>
									<Likes
										:likes="second.likes_count" 
										:likesStatus="second.likesStatus"
										@update:likesStatus="handleLikes"/>
								</view>
								
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
			<!-- <comment-second></comment-second> -->
		</view>
	</view>
</template>

<script lang="ts" setup name="">
	import Likes from '../likes/index.vue'
	// import commentSecond from '../commentSecond/index.vue'
	import { reactive,ref, watch } from 'vue'
		
	
	const props = defineProps({
	  // 评论数据
	  data: {
	    type: Object,
	    default: () => {},
	  },
	});
	




	
	

	
	// 回复评论	
	function handleReplies(){
		console.log('回复评论');
	}
	// 点赞评论
	function handleLikes(newStatus:boolean){
		// comment.likesStatus = newStatus;
		// if(newStatus){
		// 	comment.likes_count += 1;
		// }
		// else{
		// 	comment.likes_count -= 1;
		// }
	}
</script>

<style scoped lang="scss">
		
	.comment-right{
		margin-bottom: 20upx;
	}
	
	.comment-container{
		background-color: white;
		padding:0 30upx;
		.comment{
			display: flex;
			color: $text;
			font-size: 25upx;
			.comment-first-avatar{
				width: 100upx;
				.avatar{
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					margin-right: 20upx;
				}
			}
			.comment-first{
				padding-left: 30upx;
		
					
					.comment-content{
						color: #000;
						font-size: 32upx;
						margin: 15upx 0;
					}
					
					.comment-bottom{
						display: flex;
						justify-content: space-between;
						align-items: center;
							
						.dot{
							margin: 0 10upx;
							font-size: 20upx;
							font-weight: bold;
						}
							
						.replies{
							margin-left: 10upx;
						}
					}
				
			}
				
			.comment-second{
				margin-top: 10upx;
				
						
					.comment-people{
						display: flex;
						align-items: center;
						.comment-second-avatar{
							width: 50upx;
							height: 50upx;
							border-radius: 50%;
							margin-right: 20upx;
						}
					}
					.comment-triangle{
						margin: 0 15upx;
						 width: 0;  
						height: 0;  
						border-width: 10upx;
						border-style: solid;
						border-color: transparent transparent transparent $text;
						

					}
				
			}
		}
	}
</style>